<template>
  <div class="home-cinemas-view">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item :title="title" ref="item">
        <div class="box">
          <div class="box1">
            <p>特色功能</p>
            <div class="box1-a">
              <div
                :class="{ active: fn1(i) }"
                @click="fn2(i)"
                v-for="(item, i) in teseList"
                :key="i"
              >
                {{ item }}
              </div>
            </div>
            <p>特殊厅</p>
            <div class="box1-a box1-b">
              <div
                :class="{ active: fn3(i) }"
                @click="fn4(i)"
                v-for="(item, i) in tingList"
                :key="i"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="box2">
            <van-button class="box2-a box2-b" @click="reset">重置</van-button>
            <van-button color="#f03d37" class="box2-a" @click="sure"
              >确定</van-button
            >
          </div>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="cinemas">
      <van-list
        v-model="loading"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <cinemas-component
          v-for="item in cinemas"
          :key="item.id"
          v-bind="item"
        ></cinemas-component>
      </van-list>
    </div>
  </div>
</template>

<script>
import { DropdownMenu, DropdownItem, Button, List, Toast } from "vant";
import dayjs from "dayjs";
import axios from "axios";
import CinemasComponent from "@/components/CinemasComponent.vue";

export default {
  name: "HomeCinemasView",
  components: {
    // 注册组件
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Button.name]: Button,
    [List.name]: List,
    CinemasComponent,
  },
  data() {
    return {
      title: "特色",
      value1: 0, //全城绑定的值
      value2: 0, //品牌绑定的值
      // 全城列表
      option1: [
        { text: "全城", value: 0 },
        { text: "宝安区", value: 1 },
        { text: "龙岗区", value: 2 },
        { text: "龙华区", value: 3 },
        { text: "南山区", value: 4 },
        { text: "福田区", value: 5 },
        { text: "罗湖区", value: 6 },
        { text: "光明区", value: 7 },
        { text: "坪山区", value: 8 },
        { text: "大鹏新区", value: 9 },
      ],
      // 品牌列表
      option2: [
        { text: "品牌", value: 0 },
        { text: "中影UL城市影院", value: 1 },
        { text: "万达影城", value: 2 },
        { text: "中影国际影城", value: 3 },
        { text: "金逸影城", value: 4 },
        { text: "博纳国际影城", value: 5 },
        { text: "太平洋电影城", value: 6 },
        { text: "万象影城", value: 7 },
        { text: "中影德金影城", value: 8 },
        { text: "中影泰得影城", value: 9 },
        { text: "星光影城", value: 10 },
        { text: "大地影院", value: 11 },
        { text: "百川国际影城", value: 12 },
        { text: "中影星美国际影城", value: 13 },
        { text: "保利万和国际影城", value: 14 },
        { text: "保利国际影城", value: 15 },
        { text: "橙天嘉禾影城", value: 16 },
        { text: "传奇影城", value: 17 },
        { text: "CGV影城", value: 18 },
        { text: "卢米埃影城", value: 19 },
        { text: "MCL洲立影城", value: 20 },
        { text: "橙天国际影城", value: 21 },
        { text: "DY影城", value: 22 },
        { text: "华谊兄弟", value: 23 },
        { text: "中影星河电影城", value: 24 },
        { text: "南国影城", value: 25 },
        { text: "时代凤凰国际影城", value: 26 },
        { text: "SFC上影影城", value: 27 },
        { text: "中影南方国际影城", value: 28 },
        { text: "星河国际影城", value: 29 },
        { text: "英皇ua电影城", value: 30 },
        { text: "UA影院", value: 31 },
        { text: "ACTO梦空间影城", value: 32 },
        { text: "德信影城", value: 33 },
        { text: "至潮主题影城", value: 34 },
        { text: "哈艺时尚影城", value: 35 },
        { text: "云幕国际影城", value: 36 },
        { text: "星烨国际影城", value: 37 },
        { text: "汉鼎宇佑影城", value: 38 },
        { text: "完美世界影城", value: 39 },
        { text: "横店影视", value: 40 },
        { text: "华夏国际影城", value: 41 },
        { text: "环球影城", value: 42 },
        { text: "中影jaj24小时咖啡影院", value: 43 },
        { text: "中影Face电影城", value: 44 },
        { text: "中影佰纳国际影城", value: 45 },
        { text: "万都国际影城", value: 46 },
        { text: "期遇", value: 47 },
        { text: "百誉影城", value: 48 },
        { text: "百丽宫影城", value: 49 },
        { text: "时代金球影城", value: 50 },
        { text: "其他", value: 51 },
      ],
      // 存放特色功能下标
      ts1: 0,
      //特色功能
      teseList: ["全部", "可改签", "可退票"],
      // 存放特色厅下标
      ts2: 0,
      // 特色厅
      tingList: [
        "全部",
        "IMAX厅",
        "CGS中国巨幕厅",
        "杜比全景声厅",
        "Dolby Cinema厅",
        "RealD厅",
        "RealD 6FL厅",
        "LUXE巨幕厅",
        "4DX厅",
        "DTS:X 临境音厅",
        "4K厅",
        "4D厅",
        "60帧厅",
        "120帧/4K厅",
        "巨幕厅",
        "CINITY厅",
        "MX4D厅",
        "激光厅",
        "ALPD Pro高亮厅",
      ],
      offset: 0, // 当前页数
      loading: false, // 加载中的状态
      error: false, // 请求是否出错了
      day: "", //日期
      finished: false, // 是否全部加载完数据，如果这个为ture，代表没有更多数据了。
      cinemas: [], // 存放数据的
    };
  },
  methods: {
    // 根据数据显示是否高亮
    fn1(index) {
      return this.ts1 == index;
    },
    // 点击把下标修改
    fn2(index) {
      this.ts1 = index;
    },
    // 根据数据显示是否高亮
    fn3(index) {
      return this.ts2 == index;
    },
    // 点击把下标修改
    fn4(index) {
      this.ts2 = index;
    },
    // 重置就把下标都变为0
    reset() {
      (this.ts1 = 0), (this.ts2 = 0);
    },
    // 确定就显示到标题上
    sure() {
      if (this.ts1 && this.ts2) {
        // 根据下标找文字,再拼接
        this.title = this.teseList[this.ts1] + "," + this.tingList[this.ts2];
      } else if (this.ts1 != 0) {
        this.title = this.teseList[this.ts1];
      } else if (this.ts2 != 0) {
        this.title = this.tingList[this.ts2];
      } else {
        this.title = "特色";
      }
      this.$refs.item.toggle();
    },
    /**
     * @load 的事件处理函数，每次加载都会执行这个函数，并且默认会执行一次
     */
    onLoad() {
      axios
        .get("/maoyan/ajax/moreCinemas", {
          params: {
            movieId: 0,
            day: this.day,
            offset: this.offset,
            limit: 20,
            districtId: -1,
            lineId: -1,
            hallType: -1,
            brandId: -1,
            serviceId: -1,
            areaId: -1,
            stationId: -1,
            item: "",
            updateShowDay: true,
            reqId: 1661329567653,
            cityId: 30,
            lat: 22.63686219040277,
            lng: 113.82909635517456,
            optimus_uuid:
              "30495C901D6511EDB3B05919AEC4B9F2E481B7E0117C4F27AAD95A901006EA59",
            optimus_risk_level: 71,
            optimus_code: 10,
          },
        })
        .then(({ data }) => {
          if (data.success) {
            // 做追加
            this.cinemas.push(...data.cinemas.cinemas);
            this.offset = data.cinemas.paging.offset;
            this.finished = !data.cinemas.paging.hasMore;
          } else {
            Toast("请求失败");
            throw new Error("请求失败");
          }
        })
        .catch((error) => {
          console.error(error);
          // 各种原因出错了
          this.offset -= 20; // 错了之后，重新加载的话需要还是加载当前这个页
          this.error = true;
        })
        .finally(() => {
          // 设置 loading = false, 代表这次数据请求完毕
          this.loading = false;
          this.offset += 20;
        });
    },
  },
  mounted() {
    // 格式化日期
    this.day = dayjs().format("YYYY-MM-DD");
  },
};
</script>

<style scoped lang="scss">
.home-cinemas-view {
  height: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  user-select: none;
}
.box {
  position: relative;
  .box2 {
    position: fixed;
    bottom: 38%;
    left: 0;
    background-color: #fff;
  }
}
.box1 {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 14px;
  .box1-a {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .active {
      background: #fcf0f0;
      color: #f03d37;
      border: 1px solid #f03d37;
    }
  }
  .box1-a div {
    width: 76px;
    height: 38px;
    border: 1px solid #777;
    color: #777;
    text-align: center;
    line-height: 38px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 4px;
  }
  .box1-b div {
    margin-bottom: 10px;
  }
}
.box2 {
  width: 100%;
  height: 60px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  border-top: 1px solid #ccc;
  justify-content: space-between;
  align-items: center;
  .box2-a {
    width: 76px;
    height: 38px;
    border-radius: 4px;
  }
  .box2-b {
    border: 1px solid #777;
    color: #777;
  }
}
.cinemas {
  flex: 1;
  overflow: auto;
  padding-bottom: 50px;
}
</style>
<style>
.home-cinemas-view .van-dropdown-item__content {
  max-height: 50%;
}
</style>
